<template>
	<view class="navigator2-container">
		<navigation-custom :config="config" :scrollTop="scrollTop" @customConduct="naviBack" :scrollMaxHeight="scrollMaxHeight" />
		<!-- 右侧图标slot -->
		<view class="navigator2-right" :style="{top: marginTop}">
			<slot name="right"></slot>
		</view>
	</view>
</template>

<script>
	import navigationCustom from "@/components/struggler-navigationCustom/navigation-custom.vue"
	export default {
		name: "Navigator2",
		data() {
			return {
				config: {
					title: this.title, //title
					bgcolor: this.bgcolor, //背景颜色
					fontcolor: this.fontcolor, //文字颜色
					type: 3, //type 1，3胶囊 2，4无胶囊模式
					transparent: false, //是否背景透明 默认白色
					linear: false, //是为开启下滑渐变
					share: true, //是否将主页按钮显示为分享按钮
					menuIcon: this.menuIcon, //当type为3或者4的时候左边的icon文件位置
					menuIconWidth: this.menuIconWidth, //图标宽度
					menuIconHeight: this.menuIconHeight, //图标高度
					// menuText:"返回", 当type为3或4的时候icon右边的文字
				},
				scrollTop: 0, // 当linear为true的时候需要通过onpagescroll传递参数
				scrollMaxHeight: 200 //滑动的高度限制，超过这个高度即背景全部显示
			}
		},
		computed: {
			marginTop() {
				const {platform, statusBarHeight} = uni.getSystemInfoSync()
				let height = statusBarHeight + 4
				if (platform.toLowerCase() == "android") {
					height += 4
				}
				return height + "px"
			}
		},
		props: {
			title: '',
			bgcolor: {
				type: String,
				default: '#FFFFFF'
			},
			fontcolor: {
				type: String,
				default: '#000000'
			},
			menuIcon: {
				type: String,
				default: '/static/leftcursor.png'
			},
			menuIconWidth: {
				type: String,
				default: '8px'
			},
			menuIconHeight: {
				type: String,
				default: '15px'
			}
		},
		watch: {
			bgcolor: {
				handler(newVal) {
					this.config.bgcolor = newVal
				},
				immediate: true
			},
			fontcolor: {
				handler(newVal) {
					this.config.fontcolor = newVal
				},
				immediate: true
			},
			menuIcon: {
				handler(newVal) {
					this.config.menuIcon = newVal
				},
				immediate: true
			},
			menuIconWidth: {
				handler(newVal) {
					this.config.menuIconWidth = newVal
				},
				immediate: true
			},
			menuIconHeight: {
				handler(newVal) {
					this.config.menuIconHeight = newVal
				},
				immediate: true
			}
		},
        components: {
            navigationCustom
        },
		methods: {
			naviBack() {
				uni.navigateBack({
					delta: 1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.navigator2-container {
	position: relative;
}

.navigator2-right {
	position: fixed;
	right: 30rpx;
	z-index: 1001;
	display: flex;
	align-items: center;
	height: 32px;
}
</style>